Time pickers Guidelines 時間選擇器指導規則

12 小時制時鐘的撥號選擇器時間選擇器

Usage  用法

時間選擇器讓你可以選擇具體的時間。透過簡單的對話方塊,你可以選擇具體的小時和分鐘。它主要用於兩種常見情況:設定鬧鐘和安排會議時間。時間選擇器對於細微或精細的時間選擇並不理想,例如秒錶應用程式的毫秒級選擇。

Time input picker 時間輸入選擇器

時間輸入選擇器是一個簡單的工具,讓你可以直接用鍵盤輸入時間。只要點選鍵盤圖示,就可以在任何時間選擇介面使用這個功能。

透過鍵盤輸入小時數

24 hour time selection  24 小時時間選擇

你可以把時間顯示方式切換成24小時制。這個設定不在時間選擇器裡面,需要在系統設定裡調整。

24 小時錶盤檢視

Anatomy 結構

1 Label (headline) 2 Time selector separator 3 Input field 4 Input text 5.Period selector (selected)6 Period selector text (selected7 Container 8 Period selector outline 9 Period selector text 10 Dial selector track 11 Dial label (selected)12 Text buttons 13 Icon button 14 Dial label (unselected) 15 Clock dial 16 Input text (selected)17 Input field (selected)
1 Label (headline)2 Time selector separator 3 Input field 4 Input text Period selector (selected) 5 Period selector text 6 Container 7 Period selector outline 8 Period selector text (unselected) 9 Text buttons 10 Icon button11 Input text (selected)12 Input field (selected)

Container  容器

容器會顯示在頁面的最上層。當容器開啟時,底層介面會被一層灰色遮罩覆蓋,這樣可以讓使用者更容易注意到容器。

Input selector  輸入選擇器

輸入選擇器是一種特別設計的文字框。它與普通文字框的主要區別是:當你選擇某個時間欄位時,這個欄位會高亮顯示,方便你看清楚正在修改哪裡。

它使用了更大的字型和尺寸,並在下方有提示標籤。時間輸入框分為小時和分鐘兩個獨立的部分。如果你使用12小時制,在分鐘輸入框旁邊會有上午(AM)或下午(PM)的選擇項。如果使用24小時制,則不會顯示上午/下午的選擇。

Dial selector  撥號選擇器

時間選擇器採用傳統鐘錶的圓形設計。你可以直接點選數字或者拖動指標來選擇時間。在12小時制下,數字都在外圈排列。在24小時制下,數字分成兩圈:偶數在內圈,奇數在外圈。

Text and icon buttons  文字和圖示按鈕

鍵盤圖示可以讓你在兩種輸入方式之間切換:用鍵盤直接輸入時間,或用時鐘表盤選擇時間。底部有兩個按鈕:點選"取消"可以關閉視窗,點選"確定"可以儲存你選擇的時間。

Landscape orientation  橫向模式

時鐘介面會根據裝置方向自動調整。當裝置橫著放時,原本上下排列的輸入框和時鐘會變成左右排列。

Placement  放置位置

時間選擇器應該總是完整顯示在螢幕上。它不能被其他內容擋住,也不能被螢幕邊緣切掉。為了做到這一點,它會根據需要自動調整位置和顯示方式。時間選擇器會顯示在一個半透明的灰色背景上方,這樣可以讓使用者很容易看到並使用它。

Responsive layout  響應式佈局

時間選擇器會根據螢幕大小和方向自動調整顯示方式。當螢幕較寬或高度不夠時,它會自動切換到橫向顯示模式,這樣可以避免使用者需要滾動螢幕。如果螢幕高度實在太小,它會自動變成簡單的時間輸入框。

Density  密度

如果螢幕空間不夠,就不要使用時鐘表盤,直接用時間輸入框來選擇時間。

× 當視口受限時,不要應用時間選擇器錶盤,使用輸入選擇器

Behavior  行為

有兩種選擇時間的方法:1 直接在時間欄位中輸入數值,2 或者透過調整時鐘表盤來設定時間。

Appearing and disappearing出現與消失

時間選擇器會以淡入淡出的方式顯示在螢幕上。關閉時間選擇器有三種方法:點選"確定"按鈕、點選"取消"按鈕,或者點選選擇器外的任何地方。在你選擇這些操作之前,時間選擇器會一直保持在螢幕上。

Toggle between dial and input在錶盤和輸入方式之間切換

點選移動裝置時間選擇器上的鍵盤圖示可將檢視切換為輸入式選擇器。

Scrolling  滾動

時間選擇器會自動適應螢幕。它不會出現捲軸,而是會根據你的螢幕方向和大小自動調整顯示方式。另外,當你滾動頁面時,時間選擇器會保持在原位,不會跟著頁面一起滾動。

Interaction & style  互動與樣式

時間選擇器應同時支援文字輸入和錶盤選擇兩種方式。鍵盤使用者可直接輸入時間,螢幕較小時可只顯示輸入框。安卓檢視中表盤始終可見,使用者可透過鍵盤圖示切換到輸入模式。這種設計支援多種輸入方式,便於輔助技術使用者使用。

Targets  目標

錶盤選擇器的目標尺寸應為 48 x 48dp。